<template>
  <el-menu menu-trigger="click" :default-active="$route.path" router class="setting">
    <el-submenu index="1" v-permission="['admin']">
      <template v-slot:title>
        <font-awesome-icon class="icon account" :icon="['far', 'address-card']" size="lg"/>
        <span>{{ $t('commons.system') }}</span>
      </template>
      <el-menu-item v-for="menu in systems" :key="menu.index" :index="menu.index" class="setting-item">
        {{ $t(menu.title) }}
      </el-menu-item>
    </el-submenu>

    <el-submenu index="2" v-permission="['org_admin']" v-if="isCurrentOrganizationAdmin">
      <template v-slot:title>
        <font-awesome-icon class="icon organization" :icon="['far', 'building']" size="lg"/>
        <span>{{ $t('commons.organization') }}</span>
      </template>
      <el-menu-item v-for="menu in organizations" :key="menu.index" :index="menu.index" class="setting-item">
        {{ $t(menu.title) }}
      </el-menu-item>
    </el-submenu>

    <el-submenu index="3" v-permission="['test_manager']" v-if="isCurrentWorkspaceUser">
      <template v-slot:title>
        <font-awesome-icon class="icon workspace" :icon="['far', 'list-alt']" size="lg"/>
        <span>{{ $t('commons.workspace') }}</span>
      </template>
      <el-menu-item v-for="menu in workspaces" :key="menu.index" :index="menu.index" class="setting-item">
        {{ $t(menu.title) }}
      </el-menu-item>
    </el-submenu>

    <el-submenu index="4">
      <template v-slot:title>
        <font-awesome-icon class="icon" :icon="['far', 'user']" size="lg"/>
        <span>{{ $t('commons.personal_info') }}</span>
      </template>
      <el-menu-item v-for="menu in persons" :key="menu.index" :index="menu.index" class="setting-item">
        {{ $t(menu.title) }}
      </el-menu-item>
    </el-submenu>

  </el-menu>
</template>

<script>
import {checkoutCurrentOrganization, checkoutCurrentWorkspace} from "@/common/js/utils";
import Setting from "@/business/components/settings/router";

export default {
  name: "MsSettingMenu",
  data() {
    let getMenus = function (group) {
      let menus = [];
      Setting.children.forEach(child => {
        if (child.meta[group] === true) {
          let menu = {index: Setting.path + "/" + child.path}
          menu.title = child.meta.title;
          menus.push(menu);
        }
      })
      return menus;
    }
    return {
      systems: getMenus('system'),
      organizations: getMenus('organization'),
      workspaces: getMenus('workspace'),
      persons: getMenus('person'),
      isCurrentOrganizationAdmin: false,
      isCurrentWorkspaceUser: false,
    }
  },
  mounted() {
    this.isCurrentOrganizationAdmin = checkoutCurrentOrganization();
    this.isCurrentWorkspaceUser = checkoutCurrentWorkspace();
  }
}
</script>

<style scoped>
.setting {
  border-right: 0;
}

.setting .setting-item {
  height: 40px;
  line-height: 40px;
}

.icon {
  width: 24px;
  margin-right: 10px;
}

.account {
  color: #5a78f0;
}

.organization {
  color: #b33a5b;
}

.workspace {
  color: #44b349;
}
</style>
